﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <input type="button" value="从左至右" onclick="javascript:changeLayout('lefttoright');" />
    <input type="button" value="从上至下" onclick="javascript:changeLayout('toptobottom');" />
    <input type="button" value="从右至左" onclick="javascript:changeLayout('righttoleft');" />
    <input type="button" value="从下至上" onclick="javascript:changeLayout('bottomtotop');" />
    <input type="button" value="自动换行" onclick="javascript:changeAutoWrap(true);" />
    <input type="button" value="不换行" onclick="javascript:changeAutoWrap(false);" /><br />
    <canvas id="layoutCanvas" width="800" height="800" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasLayout = document.getElementById("layoutCanvas"); //绘图区域
        canvasLayout.width = window.innerWidth;
        canvasLayout.height = window.innerHeight;
        let paintLayout = new FCPaint(); //绘图对象
        paintLayout.canvas = canvasLayout;
        scaleCanvas(paintLayout);
        //判断主题色
        paintLayout.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintLayout.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasLayout, paintLayout);
        //判断是否移动端
        paintLayout.isMobile = isMobileMode();
        if (paintLayout.isMobile) {
            paintLayout.scaleFactorX = 2.5;
            paintLayout.scaleFactorY = 2.5;
        }

        //创建图层
        let layout = new FCLayoutDiv();

        //初始化图层
        let initDiv = function () {
            layout.dock = "fill";
            //添加到框架
            addView(layout, paintLayout);
            //根据主题配色
            if (layout.paint.defaultUIStyle == "dark") {
                layout.backColor = "rgb(0,0,0)";
                layout.borderColor = "rgb(100,100,100)";
                layout.textColor = "rgb(255,255,255)";
                layout.scrollBarColor = "rgb(100,100,100)";
            } else if (layout.paint.defaultUIStyle == "light") {
                layout.backColor = "rgb(255,255,255)";
                layout.borderColor = "rgb(150,150,150)";
                layout.textColor = "rgb(0,0,0)";
                layout.scrollBarColor = "rgb(200,200,200)";
            }
            layout.text = "图层";

            layout.padding = new FCPadding(10, 10, 10, 10);
            layout.autoWrap = true;
            for (let i = 0; i < 100; i++) {
                let button = new FCView();
                addViewToParent(button, layout);
                button.text = (i + 1);
                if (layout.paint.defaultUIStyle == "dark") {
                    button.backColor = "rgb(0,0,0)";
                    button.borderColor = "rgb(100,100,100)";
                    button.textColor = "rgb(255,255,255)";
                } else if (layout.paint.defaultUIStyle == "light") {
                    button.backColor = "rgb(255,255,255)";
                    button.borderColor = "rgb(150,150,150)";
                    button.textColor = "rgb(0,0,0)";
                }
                button.font = "Default,16";
                button.size = new FCSize(100, 100);
                button.location = new FCPoint(0, 0);
                button.margin = new FCPadding(10, 10, 10, 10);
            }
            resetLayoutDiv(layout);
        };

        initDiv();

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasLayout.width = document.documentElement.clientWidth;
            canvasLayout.height = document.documentElement.clientHeight;
            scaleCanvas(paintLayout);
            updateViewDefault(paintLayout.views);
            resetLayoutDiv(layout);
            invalidate(paintLayout);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintLayout.views);
        invalidate(paintLayout);

        /*
            * 切换布局
            * mode:布局方式
            */
        let changeLayout = function (layoutStyle) {
            for (let i = 0; i < layout.views.length; i++) {
                layout.views[i].size = new FCSize(100, 100);
            }
            layout.scrollV = 0;
            layout.scrollH = 0;
            layout.layoutStyle = layoutStyle;
            resetLayoutDiv(layout);
            invalidate(paintLayout);
        };

        /*
        * 切换模式
        */
        let changeAutoWrap = function (autoWrap) {
            layout.autoWrap = autoWrap;
            changeLayout(layout.layoutStyle);
        };
    </script>
</body>
</html>
